<script setup>
import Header from '@/components/header/Header.vue'
import { ref } from 'vue'
import { maskPhoneNumber } from '@/utils/index.js'
import CodeLogin from "@/views/login/components/CodeLogin.vue"
const value = ref('')
const masked = maskPhoneNumber(value.value)
</script>

<template>
    <div class="back">
       <Header title="修改密码" :back="true" />
<!--        <CodeLogin />-->
        <div class="card">
            <div class="list" >
                <div class="box">
                    <van-field v-model="masked" label="更换手机号" readonly placeholder="" input-align="right" />
                </div>
                <van-icon name="arrow" color="#999999" />
            </div>
            
        </div>
<!--        <div class="card card-1">-->
<!--            退出登录-->
<!--        </div>-->
    </div>
</template>
<style lang="scss" scoped>
.card-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.1rem;
    color: #ED6316;
    font-size: 15px;
    font-weight: 600;
}

.back {
    width: 100%;
    height: 100%;
    background: #F9F8F3;

}
.card {
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 33rem;
    margin: 1.5rem 1rem;
    background: #FFFFFC;
    border-radius: 1rem;
    z-index: 1;

    .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;

        .box {
            .van-field {
                color: #666666;
            }

            display: flex;
            align-items: center;

            .name {
                font-size: 1.5rem;
                color: #333333;
                font-weight: bold;
            }
        }
    }
}
</style>
